<route lang="json5">
{
  layout: 'default',
  style: {
    // 'custom' 表示开启自定义导航栏，默认 'default'
    navigationStyle: 'default',
    navigationBarTitleText: '',
    navigationBarBackgroundColor: '#2a90ff',
    enablePullDownRefresh:false
  },
}
</route>

<script lang="ts" setup>
import { handleClick } from '@/utils/index'

defineOptions({
  name: 'Result',
})
const tag1 = [
  {
    title: '商品分类',
    icon: 'copy',
    url: '/pages-sub/basic/category',
    bg: 'bg1',
    desc: '商品类型添加',
  },
  {
    title: '入库日志',
    icon: 'fork',
    url: '/pages-sub/basic/inboundLog',
    bg: 'bg2',
    desc: '商品登记入库',
  },
  {
    title: '销售日志',
    icon: 'copy',
    url: '/pages-sub/basic/outboundLog',
    bg: 'bg3',
    desc: '商品销售记录',
  },
  {
    title: '商品库存',
    icon: 'star',
    url: '',
    bg: 'bg7',
    desc: '商品库存清单',
  },
]

const tag2 = [
  {
    title: '设备补货',
    icon: 'star',
    url: '/pages-sub/basic/psi_sbList',
    bg: 'bg13',
    desc: '补货到设备',
  },
  {
    title: '补货日志',
    icon: 'usb',
    url: '/pages-sub/basic/buhuoLog',
    bg: 'bg14',
    desc: '补货到设备',
  },
]
</script>

<template>
  <view class="top-content">
    <view class="circle" />
    <view class="title pt-0">
      进销存系统【仓库管理】
    </view>
    <view class="desc">
      礼品或商品的入库、销售、库存等管理, 根据设备{ 出礼品(信号)数量 }进行计算
    </view>
  </view>
  <view class="box">
    <view>
      1.进: ( 礼品或商品 )登记入库
    </view>
    <view>
      2.销: 设备售出( 礼品或商品 )数量
    </view>
    <view>
      3.存: 库存 = 进货数量 - 销售数量
    </view>
    <view>
      4.其中, 销售数量为终端设备统计的( 信号数量 )
    </view>
  </view>
  <view class="box">
    <view class="title pb-20rpx">
      操作步骤
    </view>
    <wd-steps :active="5" dot custom-class="custom-steps">
      <wd-step title="配置信号" />
      <wd-step title="商品分类" />
      <wd-step title="商品入库" />
      <wd-step title="设备补货" />
      <wd-step title="售出确认" />
    </wd-steps>
  </view>
  <view class="option-list">
    <view class="title">
      商品管理
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in tag1" :key="index" :span="6">
        <view class="item" @click="handleClick(item)">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
            <view class="menu-desc">
              {{ item?.desc }}
            </view>
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
  <view class="option-list">
    <view class="title">
      商品投放
    </view>
    <wd-row>
      <wd-col v-for="(item, index) in tag2" :key="index" :span="6">
        <view class="item" @click="handleClick(item)">
          <wd-icon :name="item.icon" :custom-class="`icon-circle ${item.bg}`" />
          <view class="menu-title">
            {{ item.title }}
            <view class="menu-desc">
              {{ item?.desc }}
            </view>
          </view>
        </view>
      </wd-col>
    </wd-row>
  </view>
</template>

<style lang="scss" scoped>
.top-content{
  .title{
    padding-top: 0;
  }
}
    .pt60{
        padding-top: 60rpx;
    }
    .device-msg{
        padding: 20rpx;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        background-color: #ffffff;
        margin: 20rpx;
        border-radius: 20rpx;
        .msg{
          color: #333;
          padding-left: 40rpx;
          .row{
            margin-bottom: 8rpx;
          }
          .num{
            display: inline-block;
            background-color: $uni-color-primary;
            color: #ffffff;
            padding: 0 8rpx;
            border-radius: 6rpx;
          }
          .success{
            background-color: $uni-color-success;
          }
        }
    }
    .box{
        padding: 0.625rem;
        background-color: #ffffff;
        margin: 0.625rem;
        border-radius: 0.625rem;
        color: $uni-color-success;
      .title{
        margin-bottom: 20rpx;
        text-align:center;
        color: #ED6A0C;
      }
    }
    .custom-steps{
        padding-left: 40rpx;
    }
    ::v-deep(){
        .wd-step.is-finished .wd-step__dot{
            background: $uni-color-secondary;
        }
        .wd-step.is-finished .wd-step__title{
            color: #333;
        }
      }
</style>
